<template>
  <div>
      <n-tabs
    v-model:value="valueRef"
    type="card"
    :addable="true"
    :closable="closable"
    tab-style="min-width: 80px;"
    @close="handleClose"
    @add="handleAdd"
    @update:value="update"
  >
    <n-tab-pane v-for="panel in headImgCategory" :key="panel" :name="panel.categoryName">

    </n-tab-pane>

  </n-tabs>
  <n-upload
    multiple
    directory-dnd
    action="https://www.qiuh.top:6952/api/disk/common/oss/upload"
    :data="{
      bucketName:'gs-cloud-disk',
      path:'/wallper/2022-11-21/'
    }"
    :headers="userToken"
    @finish="finish"
  >
    <n-upload-dragger>
      <n-text style="font-size: 16px">
        图片上传
      </n-text>
    </n-upload-dragger>
  </n-upload>
  <input v-model="scale" type="text">
  <button @click="funGenerateThumbnailFile">一键压缩</button>

   <div class="imgbox"   >
      <template  v-for="(headImgItem,index) in headImgs.list" :key="headImgItem.ossFileId" >
        <div class="imgboxItem" @mouseover="mouseleave(index)" >
          <img v-if="headImgItem.thumbnailFileUrl" class='img' :src="headImgItem.thumbnailFileUrl" alt=""/>
          <img v-else class='img' :src="headImgItem.fileUrl" alt=""/>

          <div  v-if="index == isImgShow" @click="deleteImg(headImgItem.id)" class="deleteImg" style="width:30px;height:30px;">删除</div>
        </div>
      </template>
   </div>
  </div>
</template>

<script  setup >
import { defineComponent, ref, computed,onMounted } from 'vue'
import headImg from '@/store/modules/headImg'
import { storeToRefs } from 'pinia';
import { saveResource,deleteResource,generateThumbnailFile } from '@/api/headImg/headImg';


const scale = ref(0.3)
const funGenerateThumbnailFile = () =>{
  generateThumbnailFile(scale.value,currentCategory.value[0].id).then(res=>{
    alert(res.success)
  })
}


const isImgShow = ref(null)

const headImgPinia = headImg()
const valueRef = ref()
const currentCategory = ref([])
headImgPinia.getHeadImgCategory('头像').then(res=>{
  valueRef.value = res[0].categoryName
  currentCategory.value = res
})
const { headImgCategory,headImgs } = storeToRefs(headImgPinia)
const handleClose = (e) => {
    // console.log('点击的分类')
}
const handleAdd = (e) => {
    // console.log('点击的分类',e)
}
const update = (e) =>{
    currentCategory.value = headImgCategory.value.filter(item => item.categoryName == e)
    headImgPinia.getHeadImgs(currentCategory.value[0].id)
    console.log('点击的分类',currentCategory.value)
}
const userToken = ref({})
let ACCESSTOKEN = JSON.parse(window.localStorage.getItem('ACCESS-TOKEN')).value
userToken.value.Authorization = ACCESSTOKEN
console.log('获取到的用户token',userToken.value)
const mouseleave = (index) => {
  isImgShow.value = index
  console.log('移动到了',index,isImgShow.value)
}
const mouseover = () => {
  isImgShow.value = null
}


const finish = (e) =>{
  console.log("上传文件成功", e)
    let data = JSON.parse(e.event.currentTarget.response)
    console.log('上传完成',currentCategory.value[0])
      saveResource(currentCategory.value[0].id,data.data).then(res=>{
    })
}

const deleteImg = (id)=>{
    deleteResource(id)
    headImgs.value.list = headImgs.value.list.filter((item,index) => item.id != id);
    console.log('要删除图片的id',id)
}

</script>

<style  scoped>
.deleteImg{
  width: 80px !important;
  position: absolute;
  bottom: 16px;
  right: 16px;
  cursor: pointer;
  color: white;
  background-color: pink;
  text-align: center;
  padding: 3px 6px;
  border-radius: 5px;
}

.imgboxItem{
  width: 280px;
  height: 280px;
  padding: 10px;
  cursor: pointer;
  position: relative;
}
.img{
  width: 100%;
  height: 100%;
}
.imgbox{
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around; */
}
</style>
